
<!--pageData数据未还原的bug-->
<!--pageData数据未还原的bug-->
<!--pageData数据未还原的bug-->

<template>
  <div>
    <el-card shadow="never">
      <el-form ref="carForm" :model="pageData">
        <el-row>
          <el-col :span="8">
            <el-form-item label="运输任务编号:" label-width="100px" prop="id">
              <el-input v-model="pageData.transportTaskId" placeholder="请输入运输任务编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="起始地机构:" label-width="100px">
              <treeselect
                :appendToBody="true"
                v-model="pageData.startAgencyId"
                :options="deptOptions"
                :normalizer="normalizer"
                placeholder="请选择目的地机构"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="目的地机构：" label-width="100px">
                <treeselect
                  :appendToBody="true"
                  v-model="pageData.endAgencyId"
                  :options="deptOptions"
                  :normalizer="normalizer"
                  placeholder="请选择目的地机构"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="回车时间：" prop="name" label-width="100px" style="margin-bottom: 0">
              <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车辆是否可用：" prop="name" label-width="120px" style="margin-bottom: 0">
              <el-select v-model="pageData.isAvailable" placeholder="请选择目的地机构">
                <el-option v-for="item in isAvailableList" :key="item.value" :label="item.label" :value="item.value"  />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="getTable" style="padding-left: 20px">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-top: 20px;">
      <el-table :data="tableData" :stripe="true" style="width: 100%;border: 1px solid #eee;margin-top: 20px">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="transportTaskId" label="运输任务编号" width="180"></el-table-column>
        <el-table-column prop="startAgencyName" label="起始地机构" width="120"></el-table-column>
        <el-table-column prop="endAgencyName" label="目的地机构" width="120"></el-table-column>
        <el-table-column prop="transportOrderNumber" label="运单数量" width="120"></el-table-column>
        <el-table-column prop="outStorageTime" width="180" label="出车时间"></el-table-column>
        <el-table-column prop="intoStorageTime" width="180" label="回车时间"></el-table-column>
        <el-table-column prop="licensePlate" label="车牌号码"></el-table-column>
        <el-table-column label="车辆是否可用">
          <template #default="{row}">
          <my-status :text="['不可用','可用']" :status="Number(row.isAvailable)"></my-status>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="140">
          <template #default="{row}">
            <!--                        {{row}}-->
            <el-row>
              <el-button
                type="text"
                size="mini"
                style="color: #62A7F1"
                @click="$router.push(`/transit/vehicle-detail/?id=${row.id}&formUrlName=车辆管理`)">
                查看
              </el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { enterRegistrationList } from '@/api/truck-return'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { businessHallTree } from '@/api/business-hall'

export default {
  name: 'car-register',
  components: { Treeselect },
  data () {
    return {
      tableData: [],
      pageData: {
        page: 1,
        pageSize: 10
      },
      value1: '',
      isAvailableList: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '可用',
          value: true
        },
        {
          label: '不可用',
          value: false
        }],
      deptOptions: []
    }
  },
  async created () {
    await this.getTable()
    await this.getTree()
  },
  methods: {
    async getTable () {
      const { data } = await enterRegistrationList(this.pageData)
      // console.log(data.items)
      this.tableData = data.items
      // console.log(this.value1['0'])
      this.pageData.intoStorageStartTime = this.$moment(this.value1['0']).format('YYYY-MM-DD HH:mm:ss')
      // console.log(this.pageData.intoStorageStartTime)
      this.pageData.intoStorageEndTime = this.$moment(this.value1['1']).format('YYYY-MM-DD HH:mm:ss')
    },
    async getTree () {
      const { data } = await businessHallTree()
      const newdata = JSON.parse(data)
      this.deptOptions = newdata
    },
    normalizer (node) {
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },
    reset () {
      this.$refs.carForm.resetFields()
    }
  }
}
</script>

<style scoped>

</style>
